/* eslint-disable no-template-curly-in-string */
import { Drawer, Table } from "szcd";
import { type FC, type ReactNode, useState } from "react";
import { styled } from "@umijs/max";

const Box = styled.div`
  a {
    color: rgba(38,47,63,1);
  }
  .title{
    font-family: PingFangSC-Semibold;
    font-size: 16px;
    color: #262F3F;
    letter-spacing: 0;
    line-height: 24px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap:8px;
    margin-bottom: 16px;
    &::before{
      content: ' ';
      display: block;
      background: #1789FF;
      width: 3px;
      height: 14px;
    }
  }
  .body{
    margin-bottom: 32px;
  }
`;

const ExpressionDrawer: FC<{ children: ReactNode }> = ({ children }) => {
  const [isOpen, setIsOpen] = useState(false);

  return <Box>
    <a onClick={() => {
      setIsOpen(true);
    }}
    >{children}</a>
    <Drawer width={629} title="常见表达式说明" open={isOpen} onClose={() => { setIsOpen(false); }}>
      <Box>
        <div className="title">语法结构</div>
        <div className="body">
          {'所有EL都是以${为起始、以}为结尾的。'}
        </div>

        <div className="title">变量</div>
        <div className="body">
          <Table
            columns={[{
              dataIndex: 'name',
              title: '举例',
            }, {
              dataIndex: 'desc',
              title: '说明',
            }]}
            pagination={false}
            dataSource={[
              {
                name: '${usernmae}',
                desc: '取出某一范围中名称未username的变量。'
              },
              {
                name: '${pageScope.username}',
                desc: '取出Page范围名的username的变量。'
              }
            ]}
            rowKey={(row) => row.name}
          />
        </div>

        <div className="title">运算符</div>
        <div className="body">
          <Table
            columns={[{
              dataIndex: 'name',
              title: '类型',
            }, {
              dataIndex: 'desc',
              title: '包含',
            }]}
            pagination={false}
            dataSource={[
              {
                name: '算数运算符',
                desc: '+、-、*、/或div、%或mod;'
              },
              {
                name: '关系运算符',
                desc: '==或eq、!=或ne、<或lt、>或gt、<=或le、>=或ge;'
              },
              {
                name: '逻辑运算符',
                desc: '&&或and、||或or、!或not;'
              }
            ]}
            rowKey={(row) => row.name}
          />
        </div>
      </Box>
    </Drawer>
  </Box >;
};

export default ExpressionDrawer;